pp108 : onzoom Event

onzoom Event


This event is executed when you click the zoom icon in a cell. The zoom icon is displayed only if this event is associated with the column and a cell in the column is set to focus.
This event can be used for columns of the following field types:

  • input
  • output
  • textarea
  • image

Syntax

Inline HTML 
<div cordysType="wcp.library.ui.XGrid" id="xgridId ()">
    <div id="columnId" onzoom="handler" ref="columnRef"
        zoomField="myZoomField" zoomUrl="myZoomPage.htm">columnLabel</div>
...
</div>
Event property xgridId.onzoom = handler


Event Information

To invoke Click the zoom icon in a cell.
Default Action Initiates any action associated with this event.


Event Object Properties


Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.

Property Description
businessObject XML node of the business object associated with the cell.
data XML node that is the basis for the content in the XGrid.
dataNode XML data node associated with the cell.
columnId Read-only. String that refers to the identifier of the column of the cell, for which the event is executed.
getCells() Returns an array of cell objects.
getIndex() Returns the row index, where the index of the first row is '1'.
returnValue Boolean. If set to False, the event is cancelled.
row Refers to the HTML node of the unfrozen part of a row.
rowData XML node of the rowData.
rowFreezeColumn Refers to the HTML node of the frozen part (if any) of a row.
srcElement HTML node of the cell.
value The value or content to be displayed in the cell.
zoomField String. Refers to the field of the zoom application that contains the data.
zoomUrl String. Refers to the URL of the zoom application.


Remarks


A cell cannot be associated with both a zoom application and a calendar control. If both are defined, the zoom application takes precedence over the calendar control.

Example


This example uses two columns which are associated with the zoom feature. One column is an input column, the other an image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html onapplicationready="fillXGrid()">
<head>
    <meta content="Web Generator" name="Generator"/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>onzoom event</title>
<script src="/cordys/wcp/application.js"></script>

		<script type="cordys/xml" id="fieldsXML">
			 <data></data>
		</script>
		<script type="cordys/xml" id="newNode">
			 <fields>
				 <field1></field1>
				 <field2></field2>
			 </fields>
		</script>
	<script>
	var XMLNode;
	/*creates sample data to fill XGrid*/
function fillXGrid()
{	
	XMLNode =cordys.cloneXMLDocument(fieldsXML.XMLDocument);
	var dataNode = cordys.selectXMLNode(XMLNode,".//*[local-name()='data']");
	for (var i=0 ; i<20 ; i++ )
	{
		var newRow = cordys.cloneXMLDocument(newNode.XMLDocument);
		cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='field1']"), "field1_" + i)
		if ( (i % 2) == 0 )
		{
			cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='field2']"),  "/cordys/wcp/theme/default/icon/feedback/info.png");
		}
		else
		{
			cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='field2']"),  "/cordys/wcp/theme/default/image/cusp/desktop.jpg")
		}
		cordys.appendXMLNode(newRow.documentElement,dataNode);
	}
	myGrid.bindData( XMLNode );
}
	function handleZoomField1()
	  {
		  var evnt = window.application.event;
		  application.notify("start zoompage " + evnt.zoomUrl + " and get field " + evnt.zoomField);
		  evnt.value = "zoom result";
	   }
	function handleZoomField2()
	   {
		   var evnt = window.application.event;
		   application.notify("start zoompage " + evnt.zoomUrl + " and get field " + evnt.zoomField);
		   evnt.value = "/cordys/wcp/theme/default/icon/feedback/warning.png";
	   }
	</script>
</head>
<body>
<div cordysType="wcp.library.ui.XGrid"
            id="myGrid" 
            xpathRowData = "data/fields"
          		xpathBusinessObject = "."
          		style="width:400;height:200">
     <div id="field1" ref="field1" onzoom="handleZoomField1()"
             zoomUrl="myZoomPage_01.htm" zoomField="myZoomField_01">field1 input</div>
     <div id="field2" ref="field2" fieldType="image"
             onzoom="handleZoomField2()" zoomUrl="myZoomPage_02.htm"
             zoomField="myZoomField_02">Field2 image</div>
</div>
</body>
</html>

See Also


xgrid